<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>SMS Bulletin Board</title>
		
		<style type="text/css">
			body{
				font-family: Sans-serif;
				font-size: 13px;
				color: #333;
			}
			h1{
				font-size: 22px;
				font-weight: normal;
				border-bottom: 1px solid #EEE;
			}
			h2{
				font-size: 22px;
				font-weight: normal;
			}
		</style>
		
		<script type="text/javascript">
			var country_selection;
			function update_country_info(){
				var elem = document.getElementById("countries").getElementsByTagName('*');
				for (var i = 0; i < elem.length; i++) {
					if(elem[i].className == "country_info"){
						if(elem[i].id == "country_"+country_selection.value)
							elem[i].style.display = "block";
						else
							elem[i].style.display = "none";
					}
				}
			}
			window.onload = function(){
				country_selection = document.getElementById("country_selection");
				country_selection.onchange = update_country_info;
				update_country_info();
			}
		</script>
		
	</head>
	<body>
		<h1>SMS Bulletin Board</h1>
		<p>Select your location: <select id="country_selection">
			{% for country in countries %}
			<option value="{{country.country}}">{{country.country}}</option>
			{% endfor %}
		</select></p>
		
		<div id="countries">
			{% for country in countries %}
			<p class="country_info" id="country_{{country.country}}" style="display:{% ifequal forloop.counter0 0 %}block{%else%}none{%endifequal%}">
				<b>{{country.country}}</b>. To show your message, send a <b>SMS</b> to number <b>{{country.phone}}</b> with <b>{{country.keyword}} your message</b> (price <b>{{country.price}}</b>)
			</p>
		{% endfor %}
		</div>

		<h2>Last messages <small>(<a href="javascript:window.location.reload(true)">refresh</a>)</small></h2>
		
		{% if messages %}
		<ul>
			{% for msg in messages %}
			<li>Message nr. {{forloop.counter}}: <em>{{msg.message}}</em></li>
			{% endfor %}
		</ul>
		{% else %}
		<p>No messages have been sent, be the first!</p>
		{% endif %}
		
		<p>Download the source of this application from <a href="http://code.google.com/p/sms-bulletinboard/">Google Code</a></p>
		
	</body>
</html>